<template>
	<!-- 优惠详情 -->
	<view class="container">
		<view class="lansebeijing" v-for="(item, index) in items" :key="index">
			<view class="border">
				<!-- 头部标题 -->
				<view class="header">
					<view class="title">{{item.title}}</view>
					<view class="top-left">{{item.address}}</view>
					<view class="top-right">
						{{item.time}}
					</view>
				</view>
				<!-- 图片及文字描述 -->
				<view class="content">
					<view class="items">
						<image :src="item.image" class="placeholder" mode="aspectFill" />
						<text class="item-description">{{ item.description }}</text>
					</view>
				</view>
				
			</view>
			<!-- 底部价格等详细信息 -->
			<view class="border-bottom">
				<view class="bottom-one-left">
					价格：{{item.money}}.00
				</view>
				<view class="bottom-one-right">原价：￥{{item.oldmoney}}.00</view>
				<view class="bottom-two">
					活动起止时间：{{item.StartTime}} 至 {{item.EndTime}}
				</view>
				<view class="bottom-three">
					咨询电话：{{item.hotline}}
				</view>
				<view class="bottom-four">
					注意事项：{{item.precautions}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
					title: "汽车惠民活动走进群众生活", //活动主题
					address: '济源某某汽车行业', //活动店名
					time: '2023/3/10 11:09', //发布时间
					image: '/static/CarMaintenance/beijing.jpg', //活动图片
					description: '薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛薅羊毛', //简介
					money:99, //价格
					oldmoney:199, //原价
					StartTime:"2023-3-10 08:00", //开始时间
					EndTime:"2023-3-18 18:23:59", //结束时间
					hotline:"0379-66666666", //咨询电话
					precautions:"暂无" //注意事项
				}],
			};
		},
	};
</script>

<style>
	.container {}

	.lansebeijing {
		width: 100%;
		height: 300rpx;
		background-color: #3385FD;
	}

	.border {
		width: 700rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.header {
		text-align: center;
		margin-bottom: 24rpx;
		padding-top: 40rpx;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.top-left {
		float: left;
		color: #bababa;
		font-weight: 600;
		font-size: 26rpx;
		padding: 0 20rpx;
	}

	.top-right {
		float: right;
		color: #bababa;
		font-weight: 600;
		padding-right: 20rpx;
		font-size: 26rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 700rpx;
	}

	.items {
		margin-bottom: 40rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		text-align: center;
	}

	.placeholder {
		width: 100%;
		height: 300rpx;
		/* 占位符图片高度 */
		border-radius: 16rpx;
	}

	.item-title {
		font-size: 36rpx;
		margin-top: 20rpx;
	}

	.item-description {
		font-size: 26rpx;
		color: #9a9a9a;
		line-height: 50rpx;
	}
	/* 底部详细活动信息样式 */
	.border-bottom{
		width: 700rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 20rpx 0;
	}
	.bottom-one-left{
		color: #ff8f0e;
		font-size: 28rpx;
		font-weight: 600;
		margin: 0 20rpx;
		float: left;
	}
	.bottom-one-right{
		font-size: 20rpx;
		color: #a7a7a7;
		padding-top: 13rpx;
		text-decoration: line-through;
	}
	.bottom-two{
		font-size: 26rpx;
		color: #797979;
		margin: 20rpx;
	}
	.bottom-three{
		font-size: 26rpx;
		color: #797979;
		margin: 0 20rpx;
	}
	.bottom-four{
		font-size: 26rpx;
		color: #797979;
		margin: 20rpx;
	}
</style>